<template>
  <div class="home_container">
    <!-- 头部 -->
    <div class="home_header">
      <div class="search" @click="$router.push('/search')">
        <van-icon name="search" size="18" color="#aaa" />
        <span>点击搜索</span>
      </div>
    </div>

    <!-- 顶部tab -->
    <van-tabs v-model="active" sticky offset-top="46">
      <!-- :before-change="beforeTabsChange"
      @change="onTabsChange" -->
      <van-tab title="推荐">
        <ListView></ListView>
      </van-tab>
      <van-tab v-for="item in allTabList" :key="item.id" :title="item.name">
        <ListView :id="item.id"></ListView>
      </van-tab>
    </van-tabs>

    <!-- 频道管理的小图标 -->
    <!-- <van-icon name="plus" size="16" class="plus" @click="show = true" /> -->

    <!-- 频道管理的弹出层 -->
    <van-popup
      v-model="show"
      :close-on-click-overlay="false"
      @closed="isDel = false"
    >
      <div class="popup-container">
        <!-- 弹出层的头部区域 -->
        <van-nav-bar title="频道管理">
          <template #right>
            <van-icon
              name="cross"
              size="14"
              color="white"
              @click="show = false"
            />
          </template>
        </van-nav-bar>

        <!-- 弹出层的主体区域 -->
        <div class="pop-body">
          <!-- 我的频道 -->
          <div class="my-channel-box">
            <div class="channel-title">
              <div>
                <span class="title-bold">已添加频道：</span>
                <span class="title-gray">
                  {{ isDel ? "点击移除频道" : "点击进入频道" }}
                </span>
              </div>
              <span class="btn-edit" @click="isDel = !isDel">
                {{ isDel ? "完成" : "编辑" }}
              </span>
            </div>
          </div>

          <!-- 分隔线 -->
          <div class="van-hairline--top sp-line"></div>

          <!-- 更多频道 -->
          <div class="more-channel-box">
            <div class="channel-title">
              <div>
                <span class="title-bold">可添加频道：</span>
                <span class="title-gray">点击添加频道</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import ListView from "@/components/ListView/ListView.vue";
import { getAllListTab } from "@/api/request.js";

export default {
  name: "Home",
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`
  beforeRouteLeave(to, from, next) {
    from.meta.top = window.scrollY;
    next();
  },
  data() {
    // “频道名称”和“滚动条位置”之间的对应关系，格式 { '推荐': 211, 'html': 30, '开发者资讯': 890 }
    const nameToTop = {};
    return {
      active: 0,
      // 列表tab数据
      tabList: [],
      // 显示频道管理
      show: false,
      // 所有列表tab数据
      allTabList: [],
      // 频道数据是否处于删除的状态
      isDel: false,
    };
  },
  components: {
    ListView,
  },
  created() {
    this.getAllListTab();
  },
  methods: {
    // 获取所有列表tab数据
    async getAllListTab() {
      const { data: res } = await getAllListTab();
      const { status, message, data } = res;
      if (status !== 0) {
        this.$notify({ type: "danger", message: message });
      }
      this.allTabList = data;
      // this.$notify({ type: "success", message: "获取所有tab列表成功" });
    },
    // tabs 发生切换之前，触发此方法
    beforeTabsChange() {
      // 把当前"频道名称"对应的"滚动条位置"记录到 nameToTop 对象中
      const name = this.channels[this.active].name;
      nameToTop[name] = window.scrollY;

      // return true 表示允许进行标签页的切换
      return true;
    },
    // 当 tabs 切换完毕之后，触发此方法
    onTabsChange() {
      // 等 DOM 更新完毕之后，根据记录的"滚动条位置"，调用 window.scrollTo() 方法进行滚动
      this.$nextTick(() => {
        const name = this.channels[this.active].name;
        window.scrollTo(0, nameToTop[name] || 0);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.home_header {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 46px;
  padding: 8px 24px;
  background-color: #007bff;
  z-index: 2;
  .search {
    display: flex;
    align-items: center;
    width: 100%;
    height: 34px;
    padding: 0 18px;
    line-height: 34px;
    border-radius: 17px;
    background-color: #fff;

    span {
      font-size: 14px;
      margin-left: 10px;
      color: #a3a2a2;
    }
  }
}
.van-tabs {
  margin-top: 46px;
}
// 为 tabs 容器设置右 padding
/deep/ .van-tabs__wrap {
  // padding-right: 36px;
  background-color: white;
}
// 频道管理小图标的定位
.plus {
  position: fixed;
  top: 58px;
  right: 10px;
  z-index: 999;
}
.van-popup,
.popup-container {
  background-color: transparent;
  height: 100%;
  width: 100%;
}

.popup-container {
  display: flex;
  flex-direction: column;
}

.pop-body {
  flex: 1;
  overflow: scroll;
  padding: 8px;
  background-color: white;
}

.my-channel-box,
.more-channel-box {
  .channel-title {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    line-height: 28px;
    padding: 0 6px;
    .title-bold {
      font-weight: bold;
    }
    .title-gray {
      color: gray;
      font-size: 12px;
    }
  }
}

.btn-edit {
  border: 1px solid #a3a2a2;
  padding: 0 10px;
  line-height: 20px;
  height: 20px;
  border-radius: 6px;
  font-size: 12px;
}

.channel-item {
  font-size: 12px;
  text-align: center;
  line-height: 36px;
  background-color: #fafafa;
  margin: 6px;
}

.cross-badge {
  position: absolute;
  right: -3px;
  top: 0;
  border: none;
}

.sp-line {
  margin: 10px 0 20px 0;
}
</style>

<style lang="less">
.van-tabs__line {
  background-color: #007bff !important;
}
</style>
